import { FC, useEffect, useMemo, useState } from 'react';

import { List, DatePicker } from 'antd-mobile';
import dayjs from 'dayjs';
import './index.css';
import { FundsObj } from '../../type';
import { dayFormatter, getBuyDataLocalKey } from '../../utils';
import useFundsArr from '../../useFundsArr';

interface FundCardProps {
  fundsCode: string[];
}

const FundCard: FC<FundCardProps> = ({ fundsCode }) => {
  const { fundsInfoArr } = useFundsArr(fundsCode);

  const arr = useMemo(() => {
    return fundsInfoArr.sort(
      (a, b) => (Number(a?.expectGrowth) || 0) - (Number(b.expectGrowth) || 0),
    );
  }, [fundsInfoArr]);

  return (
    <List style={{ marginBottom: '80px' }}>
      {arr?.map((item) => {
        let curName = item.name;
        return (
          <List.Item
            title={curName + `(${item.code})`}
            extra={
              item.expectGrowth && (
                <span
                  style={Number(item.expectGrowth) >= 0 ? { color: 'red' } : { color: 'green' }}
                >
                  （{Number(item.expectGrowth).toFixed(2)}%）
                </span>
              )
            }
          />
        );
      })}
    </List>
  );
};
export default FundCard;
